@page "/docs/form/datepicker"
@layout DocLayout

<Title>DatePicker日期选择器</Title>
<Subtitle Size="Size.Size4">
    日期选择
</Subtitle>
<hr>


<div class="content">
    <p>
        移植于http://foundation-datepicker.peterbeno.com
    </p>
</div>

<DocView ComType="DatePicker1"/>
<hr>

<Title Size="Size.Size4" IsSpaced>
    时间选择
</Title>
<DocView ComType="DatePicker2"/>

<hr>
<Title Size="Size.Size4" IsSpaced>
    Options参数
</Title>

<Table IsBordered IsStriped IsHoverable>
    <thead>
    <tr>
        <th>Name</th>
        <th>type</th>
        <th>default</th>
        <th>description</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Format</td>
        <td>string</td>
        <td>'yyyy-MM-dd'</td>
        <td>the date format, combination of yyyy-MM-dd HH:mm</td>
    </tr>
    <tr>
        <td>Language</td>
        <td>string</td>
        <td>'zh-CN'</td>
        <td>en | zh-CN</td>
    </tr>
    <tr>
        <td>WeekStart</td>
        <td>integer</td>
        <td>0</td>
        <td>day of the week start. 0 for Sunday - 6 for Saturday</td>
    </tr>
    <tr>
        <td>StartView</td>
        <td>integer</td>
        <td>month</td>
        <td>set the start view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0</td>
    </tr>
    <tr>
        <td>MinView|MaxView</td>
        <td>integer</td>
        <td></td>
        <td>set a limit for view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0</td>
    </tr>
    <tr>
        <td>PickTime</td>
        <td>boolean</td>
        <td>false</td>
        <td>enables hour and minute selection views, equivalent of minView = 0, else minView = 2</td>
    </tr>
    <tr>
        <td>InitialDate</td>
        <td>date string</td>
        <td>null</td>
        <td>sets initial date. The same effect can be achieved with value attribute on input element.</td>
    </tr>
    <tr>
        <td>StartDate</td>
        <td>date</td>
        <td>-Infinity</td>
        <td>disables all dates before given date</td>
    </tr>
    <tr>
        <td>EndDate</td>
        <td>date</td>
        <td>Infinity</td>
        <td>disables all dates after given date</td>
    </tr>
    <tr>
        <td>KeyboardNavigation</td>
        <td>boolean</td>
        <td>true</td>
        <td>with input fields, allows to navigate the datepicker with arrows. However, it disables navigation inside the input itself, too</td>
    </tr>
    <tr>
        <td>DaysOfWeekDisabled</td>
        <td>Array of integers</td>
        <td>[]</td>
        <td>disables all dates matching the given days of week (0 = Sunday, 6 = Saturday)</td>
    </tr>
    <tr>
        <td>DatesDisabled</td>
        <td>Array of date </td>
        <td>[]</td>
        <td>disables the specified dates</td>
    </tr>
    </tbody>
</Table>

@code{



}